import React from 'react';
import { Layout, Menu, Button } from 'antd';
import { UserOutlined, LogoutOutlined, HomeOutlined, ProfileOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { useTheme } from '../../contexts/ThemeContext';
import Home from '../Home';
import './index.css';

const { Header, Sider, Content } = Layout;

// 用户仪表盘组件
const UserDashboard: React.FC = () => {
  const navigate = useNavigate(); // 用于页面导航
  const { isEnglish } = useTheme(); // 获取语言状态

  // 处理用户退出登录的函数
  const handleLogout = () => {
    localStorage.removeItem('token'); // 移除本地存储中的 token
    localStorage.removeItem('userRole'); // 移除本地存储中的用户角色
    navigate('/login'); // 导航到登录页面
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider width={256}>
        <div className="logo" />
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['1']}
          items={[
            {
              key: '1',
              icon: <HomeOutlined />,
              label: isEnglish ? 'Home' : '首页', // 根据语言状态显示标签
            },
            {
              key: '2',
              icon: <ProfileOutlined />,
              label: isEnglish ? 'Profile' : '个人信息', // 根据语言状态显示标签
            },
          ]}
        />
      </Sider>
      <Layout>
        <Header>
          <span className="user-info">
            {isEnglish ? 'Welcome, User' : '欢迎，普通用户'} // 根据语言状态显示欢迎信息
          </span>
          <Button
            type="primary"
            icon={<LogoutOutlined />}
            onClick={handleLogout}
          >
            {isEnglish ? 'Logout' : '退出登录'} // 根据语言状态显示按钮文字
          </Button>
        </Header>
        <Content>
          <Home />
        </Content>
      </Layout>
    </Layout>
  );
};

export default UserDashboard;